<template>
    <div class="container" :style="{ display: style }">
      <div class="title">
          <span>成员管理</span>
      </div>
      <div class="content">
          <span>小A: 收到！</span>
      </div>
    </div>
  </template>
  
  <script setup>
  import { defineProps, ref, onUnmounted, onMounted } from "vue";
  
  var style = ref('none');
  
  //从父组件拿来的数据
  const props = defineProps({
    invisible: {
      type: Boolean,
    },
  });
  
  onUnmounted(() => {
    //清除计时器
    window.clearInterval();
  });
  
  setInterval(() => {
    if (props.invisible) {
      style.value = "none";
    } else {
      style.value = "flex";
    }
  }, 1000);
  </script>
  
  <style scoped>
  .container {
    height: 50rem;
    width: 37.5rem;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 20px;
    background-color: rgb(255, 255, 255);
    box-shadow: 0px 4px 20px gray;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  
  .title{
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: large;
      font-weight: bold;
      text-align: center;
      width: 3.75rem;
      height: 3.75rem;
      border-bottom:1px solid gray ;
  }
  
  .content{
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 31.25rem;
  }
  </style>